<template>
	<view class="stepPlus">
		<view class="timeItem" v-for="(timeItem,index) in timeList" :key="index">
			<div class="avatorContainer">
				<div class="avator">
					<div class="info">
						<div class="text" v-if="timeItem.avator.type === 'text'">{{ timeItem.avator.text }}</div>
						<div class="icon" v-else :style="avatorIconStyle(timeItem.avator)">
							<i :class="['iconfont',timeItem.avator.avatorIcon]"></i>
						</div>
						<div class="point" v-if="timeItem.avator.pointerClass" :style="{
							background: timeItem.avator.pointerBgColor || '#58bf97'
						}">
							<i :class="['iconfont',timeItem.avator.pointerClass]"></i>
						</div>
					</div>
				</div>
				<div class="line" v-if="index < timeList.length - 1" :style="{
					borderRight: timeItem.lineType === 'dashed' ? '2px dashed #e1e1e1' : '2px solid #b9d9fd'
				}"></div>

			</div>
			<div class="content">
				<div class="title" v-if="timeItem.title" :style="{
					'padding-right' :  timeItem.time ? '160px' : '0'
				}">
					<div class="titleInfo">{{ timeItem.title }}</div>
					<div class="time">{{ timeItem.time }}</div>
				</div>
				<div class="subTitle" v-if="timeItem.subTitle">{{ timeItem.subTitle }}</div>
				<div class="extra" v-if="timeItem.extraSlotName">
					<slot v-bind:[timeItem.extraSlotName]='timeItem' :name='timeItem.extraSlotName' />
				</div>
			</div>
		</view>

		
	</view>
</template>

<script>
	export default {
		props: {
			timeList: {
				type: Array,
				default: () => [{
					title: '', // 主标题
					lineType: 'solid', // 线的类型: solid(实线) dashed(虚线)
					subTitle: '', // 副标题
					time: '', // 右侧时间
					extraSlotName: '', // 额外内容插槽名称 
					avator: {
						type: '', // 头像类型  text(文本) icon(图标)
						text: '', // 头像文本
						avatorBgColor: '#3d87f6', // 头像背景颜色
						avatorIcon: '', // 头像iocn类名
						pointerClass: '', // 头像右下角icon 类名
						pointerBgColor: '#58bf97' // 头像右下角背景颜色
					},
				}]
			}
		},
		data() {
			return {

			}
		},
		methods: {
			avatorIconStyle(data) {
				const isSmall = data.size === 'small'
				const avatorIconStyle = {
					width: isSmall ? '16px' : '32px',
					height: isSmall ? '16px' : '32px',
					fontSize: isSmall ? '10px' : '16px',
					background: data.avatorBgColor || '#3d87f6'
				}
				return avatorIconStyle
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.stepPlus {
		width: 100%;
		height: 400px;
		padding: 12px;

		.timeItem {
			display: flex;

			.avatorContainer {
				width: 54px;
				display: flex;
				flex-direction: column;
				align-items: center;
				min-height: 100%;
				padding-top: 3px;

				.avator {
					.info {
						position: relative;

						.text {
							width: 32px;
							height: 32px;
							text-align: center;
							line-height: 32px;
							border-radius: 50%;
							background-color: #ecf0fc;
							color: #5877ea;
							font-size: 16px;
						}

						.icon {
							width: 32px;
							height: 32px;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 50%;
							background-color: #3d87f6;
							color: #ffffff;
						}

						.point {
							font-size: 12px;
							position: absolute;
							right: -4px;
							bottom: -4px;
							width: 14px;
							height: 14px;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 50%;
							color: #fff;

							i {
								font-size: 10px;
							}
						}
					}
				}

				.line {
					height: calc(100% - 8px);
					margin: 6px 0 4px 0;
				}
			}

			.content {
				padding-left: 8px;
				padding-bottom: 8px;
				flex: 1;

				.title {
					font-weight: 550;
					color: #333;
					font-size: 14px;
					padding-bottom: 4px;
					position: relative;

					.time {
						color: #999;
						font-weight: normal;
						position: absolute;
						right: 0;
						top: 0;
					}
				}

				.subTitle {
					color: #999;
					padding-bottom: 12px;
				}

				.extra {
					padding-bottom: 8px;
				}
			}
		}
	}

	
</style>
<style lang="scss">

</style>
